<template>
  <view class="media-box">
    <view id="player" :detail="urlInfo" :change:detail="xgplayer.initJs">
    </view>
    <u-tabs :list="tabs" @click="tabcClick" lineColor="#6fb666"></u-tabs>
    <view class="detail-box" v-if="currentIndex == 0">
      <view class="title-box">
        {{beyondInfo.name}}
      </view>
      <u-collapse accordion>
        <u-collapse-item title="简介">
          <text class="u-collapse-content">{{beyondInfo.intro}}</text>
        </u-collapse-item>
      </u-collapse>
      <view class="title-wrap">
        <view class="title">
          选集
        </view>
        <view class="move">
          <u-icon name="arrow-right" size="16"></u-icon>
        </view>
      </view>
      <scroll-view class="scroll-box" scroll-x="true" @scroll="scroll" scroll-left="0">
        <view class="video-box" :style="{width:`${110*total}rpx`}">
          <block v-for="(item,index) in chapterList" :key="item.id">
            <view class="video-item" :class="{'chapter-active':videoId == item.id}" @click="tabVideo(item.id)">
              {{item.title_alias}}
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
    <view class="review-box" v-if="currentIndex == 1">
      评论
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '视频'
          },
          {
            name: '讨论',
            badge: {
              value: 199,
            }
          },
        ],
        chapterList: [],
        currentIndex: 0,
        urlInfo: {},
        beyondInfo: {},
        old: {
          scrollTop: 0
        },
        total: 0,
        videoId: 0,
      }
    },
    onLoad(o) {
      this.init(o.id)
      this.getChapter(o.id)
    },
    methods: {
      // 获取视频详情
      async init(id) {
        const res = await this.$api.getVideoDetail({
          id
        })
        if (res.code == 200) {
          this.beyondInfo = res.data
        }
        console.log(res);
      },
      scroll(e) {
        console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
      // 获取剧集
      async getChapter(id) {
        const param = {
          comic_id: id,
          isAll: true
        }
        const res = await this.$api.getChapter(param)
        if (res.code == 200) {
          this.chapterList = res.data?.data
          this.total = res.data.data.length
          this.videoId = res.data.data[0].id
          this.getVideoPage(this.videoId)
        }
        console.log(res);
      },
      tabcClick(item) {
        console.log('item', item);
        this.currentIndex = item.index
      },
      // 切换视频
      tabVideo(id) {
        this.videoId = id
        this.getVideoPage(id)
      },
      // 获取播放视频链接
      async getVideoPage(id) {
        const res = await this.$api.getVideoPage({
          id
        })
        if (res.code == 200) {
          this.urlInfo = res.data
        }
        console.log(res);
      }
    }
  }
</script>
<script module="xgplayer" lang="renderjs">
  import 'xgplayer'
  import HlsJsPlayer from 'xgplayer-hls.js';
  let xgPlayer
  export default {
    data() {
      return {
        link: '',
      }
    },
    mounted() {
      this.initPlyaer()
    },
    methods: {
      initJs(newDetail, old, ownerInstance, instance) {
        console.log(newDetail, 'newDetail', xgPlayer);
        this.link = newDetail.url
        xgPlayer.once('complete', () => {
          console.log('complete')
        })
        if (this.link) {
          xgPlayer.src = this.link.trim()
        }
      },
      initPlyaer() {
        xgPlayer = new HlsJsPlayer({
          id: 'player',
          // width: 390,
          fluid: true,
          url: this.link,
          autoplay: true,
          rotateFullscreen: true,
          // enableVideoDbltouch: true,
          screenShot: {
            saveImg: true,
            quality: 0.92,
            type: 'image/png',
            format: '.png'
          }
        });
      },
      // 逻辑层通过改变 startPlayValue 来触发 renderjs 函数
      onClick() {
        console.log(xgPlayer, 'xgPlayer');
        // xgPlayer.play()
        // xgPlayer.src = this.urls[1]
        // xgPlayer.src = 'https://new.qqaku.com/20221111/SfepBVSZ/index.m3u8'
      }
    }
  }
</script>
<style lang="scss" scoped>
  .media-box {
    width: 100%;

    .player {
      z-index: 999;
    }

    .detail-box {
      .title-box {
        padding: 0 20rpx;
        height: 120rpx;
        line-height: 120rpx;
        // background-color: red;
        font-size: 30rpx;
        font-weight: 600;
      }

      .title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        // background-color: red;
        padding: 0 20rpx;

        .title {
          font-size: 30rpx;
          font-weight: 700;
        }
      }

      .scroll-box {
        white-space: nowrap;
        width: 100%;

        .video-box {
          min-width: 100%;
          display: flex;
          padding-left: 20rpx;
          margin-bottom: 10rpx;

          .video-item {
            height: 100rpx;
            width: 100rpx;
            line-height: 100rpx;
            text-align: center;
            background-color: #f3f4f8;
            // border: 2rpx solid red;
            border-radius: 2rpx;
            margin-right: 10rpx;
          }

          .chapter-active {
            color: #6fb666;
          }
        }
      }
    }
  }
</style>
